<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem to="/customer">客户管理</BreadcrumbItem>
        <BreadcrumbItem>客户详情</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-hd">
            <div class="kui-hd-title">客户基本信息</div>
          </div>
          <div class="kui-item-bd device-management-box">
            <Row>
              <i-col span="8">客户编号：{{essentialInfor.no}}</i-col>
              <i-col span="8">客户名称：{{essentialInfor.name}}</i-col>
              <i-col span="8">联系电话：{{essentialInfor.phone}}</i-col>
              <i-col span="8">备用电话：{{essentialInfor.mobile}}</i-col>
              <i-col span="8">联系人名：{{essentialInfor.linkman}}</i-col>
              <i-col span="8">客户地址：{{essentialInfor.address}}</i-col>
              <i-col span="8">状态标识：
                <span v-if="essentialInfor.state === 1">正常</span>
                <span v-else-if="essentialInfor.state === -1">锁定</span>
                <span v-else>未知</span>
              </i-col>
              <i-col span="8">角色状态：
                <span v-if="essentialInfor.level === 0">潜在客户</span>
                <span v-else-if="essentialInfor.level === 1">普通客户</span>
                <span v-else-if="essentialInfor.level === 2">优质客户</span>
                <span v-else>未知</span>
              </i-col>
              <i-col span="8">录入者：{{essentialInfor.author}}</i-col>
              <i-col span="8">录入时间：{{essentialInfor.created_at}}</i-col>
            </Row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
   data () {
     return {
      essentialInfor: {}
     }
   },
   methods: {
     //获取数据
    async getData(id) {
      const app = this
      let { data } = await app.$axios.get(`/master/v1/customer/${id}`)
      if( data.code === 100 ) {
        app.essentialInfor = data.result
      }
    },
   },
   created () {
     this.getData(this.$route.query.id)
   }
 }
</script>

<style lang="less" scoped>
@range: 24px;
.kui-section-item {
  &+.kui-section-item {
    margin-top: @range !important;
  }
}
.device-management-box {
  .ivu-row {
    .ivu-col {
      font-size: 14px !important;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 2.4;
    }
  }
}
</style>
